import React, { useEffect, useState } from 'react';
import useAuth from "@/hooks/useAuth";
import { useSelector, useDispatch } from 'react-redux'
import { getArticleList,getArticleDelete } from "../../store/counterSlice.js";
import instance from "../../apis/request.js";
import { Table ,Space} from 'antd';
import Search from "../../computed/Search.jsx";
function Home() {
//     const isAuthenticated = useAuth()
//   if(!isAuthenticated) {
//     return null  //// 如果没有通过验证，返回null或加载中状态
//   }
const {articleData,count} = useSelector(state => state.counter)
  const dispatch = useDispatch()
  const [data,setData]=useState({
    page:1,//页码  必传
pageSize:6,//每页显示条数 必传
keyword:null,//搜索标题
tag:null//搜索标签
  })
  const [fy,setFy]=useState({
    page:1,
    pageSize:6,
    total:0

  })
  const dd=async()=>{
    await instance.get('/article/list',{
        params:data
    }).then(res=>{
        dispatch(getArticleList(res.data)),
        setFy({
            ...fy,
            total:res.data.count
        })
    })
  }
  useEffect(()=>{
    dd()
  },[data,dispatch])
  const aa=(diss)=>{
    setData({
        ...data,
        page:diss.current,
        pageSize:diss.pageSize
    }),
    setFy({
        ...fy,
        page:diss.current,
        pageSize:diss.pageSize,
        total:diss.total

    })
  }
  const del=(record)=>{
    dispatch(getArticleDelete(record.id))
  }
  const columns = [
  {
    title: '姓名',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '年龄',
    dataIndex: 'content',
    key: 'content',
  },
  {
    title: '住址',
    dataIndex: 'action',
    key: 'action',
  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <button onClick={()=>{del(record)}}>删除</button>
        <button>编辑</button>
      </Space>
    ),
  },
];
const onchange=(e)=>{
    setData({
        ...data,
        keyword:e.keyWord
    })
}
    return (
        <div>
            <Search pp={onchange} />
            <Table dataSource={articleData} columns={columns} onChange={aa} pagination={fy} />
        </div>
    );
}

export default Home;